<template>
    <div class="user-center">
        <h1>用户中心</h1>
        <div class>
            <section class="user-info">
                <label for class="user-info-label">账号</label>
                <span class="user-info-value">{{userInfo.account}}</span>
            </section>
            <section class="user-info">
                <label for class="user-info-label">身份</label>
                <span class="user-info-value">{{memberInfo}}</span>
            </section>
            <section class="vip-list">
                <ul class="container">
                    <li v-for="(item, index) in vipList" :key="index" class="list-item">
                        <div class="item-name">{{item.name}}</div>
                        <div class="item-content">
                            <span class="item-content__price">
                                {{item.charge}}元
                                <span class="item-content__date">/ 30天</span>
                            </span>
                            <button class="item-content__btn" @click="buy(item)">购买</button>
                        </div>
                    </li>
                </ul>
            </section>
        </div>
    </div>
</template>

<script>
import store from "../store";
import { mapState, mapGetters } from "vuex";
export default {
    data() {
        return {
            vipList: []
        };
    },
    mounted() {
        this.vipList = [
            { name: "vip会员", charge: "10.00", vipLevel: 0, userStatus: 1 },
            {
                name: "高级VIP1会员",
                charge: "50.00",
                vipLevel: 1,
                userStatus: 2
            },
            {
                name: "高级VIP3会员",
                charge: "100.00",
                vipLevel: 3,
                userStatus: 2
            },
            {
                name: "高级VIP9会员",
                charge: "1000.00",
                vipLevel: 9,
                userStatus: 2
            },
            {
                name: "高级VIP12会员",
                charge: "10000.00",
                vipLevel: 12,
                userStatus: 2
            }
        ];
    },
    computed: {
        ...mapState(["userInfo"]),
        ...mapGetters(["memberInfo"])
    },
    methods: {
        recharge() {},
        upgrade() {},
        buy(e) {
          console.log(e)
            store.dispatch("buyVip", e).then(res => {
                alert(res);
            });
        }
    }
};
</script>

<style scoped>
.user-center {
  padding: 0 20px;
  box-sizing: border-box;
}
.user-center .user-info {
  display: flex;
  align-items: center;
  line-height: 2;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
}
.user-center .user-info-label,
.user-center .user-info-value {
  flex: 0 0 auto;
}
.user-center .user-info:last-child {
  border-bottom: none;
}
.user-center .container {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.user-center .container .list-item {
  flex: 1;
  width: 100%;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
  margin-bottom: 20px;
  border-radius: 5px;
  list-style: none;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to left top, #ea7c3e, #ad1a8b);
}
.user-center .container .list-item .item-name {
  display: block;
  width: 100%;
  color: #ffe5db;
}
.user-center .container .list-item .item-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
.user-center .container .list-item .item-content__price {
  flex: 1;
  color: #ff9900;
  font-size: 22px;
}
.user-center .container .list-item .item-content__price .item-content__date {
  font-size: 14px;
  color: #ffe5db;
}
.user-center .container .list-item .item-content__btn {
  flex: 0 0 auto;
  font-size: 16px;
  background: transparent;
  opacity: 0.9;
  color: #fff;
  line-height: 2;
}
.user-center .container .list-item .item-content__btn::after {
  border: none;
}
.user-center .container .list-item .item-description {
  width: 100%;
  font-size: 12px;
  color: #ffe5db;
}
.user-center .btn {
  width: 100%;
  height: auto;
  color: #fff;
  background: #373737;
  margin: 10px 0 20px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 16px;
}

</style>

